<template>
    <div class="bs-workmain">
        <div class="bs-workmain-application">
            <itemList class="bs-workmain-itemList newlisticon">
                <header class="bs-workmain-newHeader">
                    <div class="bs-workmain-mycode">我的应用</div>
                </header>
                <div class="bs-workmain-itemT  bs-workmain-itemTt bs-workmain-itemTnew">
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/2.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            班组活动
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全检查
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全生产例会
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/5.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            履职管理
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/6.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全责任制
                        </p>
                    </div>
                </div>
            </itemList>
            <!-- 日常工作 -->
            <itemList class="bs-workmain-itemList">
                <header class="bs-workmain-newHeader">
                    <div class="bs-workmain-mycode">日常工作</div>
                </header>
                <div class="bs-workmain-itemT bs-workmain-itemTnew">
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/1-2.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全曝光台
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/1-3.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            领导带班
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/1-4.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            班组活动
                        </p>
                    </div>
                </div>
            </itemList>
            <!-- 现场作业 -->
            <itemList class="bs-workmain-itemList">
                <header class="bs-workmain-newHeader">
                    <div class="bs-workmain-mycode">现场作业</div>
                </header>
                <div class="bs-workmain-itemT bs-workmain-itemTnew">
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-1.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全检查
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-2.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            隐患管理
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-3.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            高风险作业
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-4.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全风险管理
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-5.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            施工用电
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-6.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            违章管理
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-7.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            设备管理
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-8.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            履职记录
                        </p>
                    </div>
                    <div class="bs-workmain-newlist"
                         @click="$router.push('/epidemicFKEntery')"
                         v-if="registerInfo.departName">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-9.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            疫情防控
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         v-else
                         @click="$vux.toast.text('请新增单位或加入单位')">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/3-9.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            疫情防控
                        </p>
                    </div>
                </div>
            </itemList>
            <!-- 其他应用 -->
            <itemList class="itemList bs-workmain-itemList--new">
                <header class="bs-workmain-newHeader">
                    <div class="bs-workmain-mycode">其他应用</div>
                </header>
                <div class="bs-workmain-itemT bs-workmain-itemTnew">
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-9.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            人员管理
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-10.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            教育培训
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-1.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            事故上报
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-2.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            应急救援
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-3.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全文化
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-4.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            技术方案
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-5.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            制度管理
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-6.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            安全责任制
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-7.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            职业健康
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable"
                         @click="alertShow">
                        <div class="bs-workmain-Itop">
                            <img class="bs-workmain-img"
                                 src="../assets/4-8.png" />
                        </div>
                        <p class="bs-workmain-Ibottom">
                            标准化自评
                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable">
                        <div class="bs-workmain-Itop">

                        </div>
                        <p class="bs-workmain-Ibottom">

                        </p>
                    </div>
                    <div class="bs-workmain-newlist unclickable">
                        <div class="bs-workmain-Itop">

                        </div>
                        <p class="bs-workmain-Ibottom">

                        </p>
                    </div>
                </div>
            </itemList>
        </div>
        <div class="bs-workmain-fixednew"
             style="z-index:2"
             @click="flag=!flag"
             v-if="flag">
        </div>
        <div class='bs-workmain-ss_menu'
             style="z-index:3">
            <div class="bs-workmain-firstList unclickable"
                 :class="flag?'bs-workmain-firstListnew':''"
                 @click="alertShow"
                 v-if="exposureItem.pageurl === ''">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../assets/5-1.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">安全曝光</div>
            </div>
            <div class="bs-workmain-firstList"
                 :class="flag?'bs-workmain-firstListnew':''"
                 @click="$router.push(exposureItem.pageurl)"
                 v-else-if="exposureItem.pageurl">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../assets/5-1.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">安全曝光</div>
            </div>

            <div class="bs-workmain-firstList unclickable"
                 :class="flag?'bs-workmain-twoList':''"
                 @click="alertShow"
                 v-if="openCheckItem.pageurl === ''">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../assets/5-2.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">开展检查</div>
            </div>
            <div class="bs-workmain-firstList"
                 :class="flag?'bs-workmain-twoList':''"
                 @click="$router.push(openCheckItem.pageurl)"
                 v-else-if="openCheckItem.pageurl">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../assets/5-2.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">开展检查</div>
            </div>

            <div class="bs-workmain-firstList"
                 :class="flag?'bs-workmain-threeList':''"
                 @click="alertShow"
                 v-if="openCheckItem.pageurl === ''">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../assets/5-3.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">登记隐患</div>
            </div>
            <div class="bs-workmain-firstList"
                 :class="flag?'bs-workmain-threeList':''"
                 @click="$router.push('/newHideRegister')"
                 v-else-if="openCheckItem.pageurl">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../assets/5-3.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">登记隐患</div>
            </div>
            <div class='bs-workmain-share'
                 style="z-index:4"
                 data-rot='180'
                 @click="changeMsg(flag)"
                 v-if="JSON.stringify(exposureItem)!=='{}'|| JSON.stringify(openCheckItem)!=='{}'">
                <img class="bs-workmain-img"
                     src="../assets/write.png">
            </div>
        </div>

        <!-- 模态框 -->
        <toast v-model="showPositionValue"
               type="text"
               :time="1200"
               width="140px"
               is-show-mask
               :text="('该模块暂未开通 ！')"
               :position="tosPosition"></toast>
        <toast v-model="showPositionValue2"
               type="text"
               :time="1200"
               width="140px"
               is-show-mask
               :text="('暂无更多内容 ！')"
               :position="tosPosition"></toast>
    </div>
</template>

<script>
import { InlineLoading, TabbarItem, TransferDom } from 'vux'
import itemList from '@commonComponents/itemList/itemList'
export default {
    name: 'newEdit',
    data () {
        return {
            showPositionValue: false,
            showPositionValue2: false,
            tosPosition: 'center',
            show: true,
            flag: false, /** ****************masK is show*************** */
            menuList: [],
            userId: '',
            tokenId: '',
            projectId: '',
            registerInfo: {},
            functionModule: [],
            exposureItem: {}, // 曝光item
            openCheckItem: {} // 开展检查item
        }
    },
    directives: {
        TransferDom,
        TabbarItem
    },
    created () {
        this.registerInfo = JSON.parse(localStorage.getItem('registerInfo'))
    },
    components: {
        itemList,
        InlineLoading
    },
    methods: {
        // tothermometrylink () {
        //     this.$router.push('/thermometryindex')
        // },
        alertShow () {
            this.$vux.alert.show({
                title: '如需开通请联系客服',
                content: '客服电话：400-027-0009，客服Q Q：1720876917',
                onShow () {
                    console.log('Plugin: I\'m showing')
                },
                onHide () {
                    console.log('Plugin: I\'m hiding')
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
@workmain-prefix: bs-workmain;
@bgcolor: #2269ff;
.@{workmain-prefix} {
    width: 100%;
    min-height: 100%;
    height: 100%;
    padding-top: 20px;
    background: #ebeef2;
    padding-bottom: 40px;
    &-application {
        padding-bottom: 60px;
        background: #ebeef2;
    }
    &-newHeader {
        display: flex;
        justify-content: space-between;
    }
    &-mycode {
        font-size: 15px;
        color: #333333;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
    }
    &-editMsg {
        width: 50px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        border: 1px solid @bgcolor;
        color: @bgcolor;
        border-radius: 10px;
    }
    &-itemT {
        width: 100%;
        display: flex;
        // justify-content: space-between;
    }
    &-itemTt {
        justify-content: left;
    }
    &-itemT&-itemTnew {
        flex-wrap: wrap;
        .@{workmain-prefix}-newlist {
            margin-right: 44px;
        }
        .@{workmain-prefix}-newlist:nth-child(4n + 4) {
            margin-right: 0;
        }
    }
    &-newlist {
        width: 50px;
        margin-top: 16px;
    }
    &-Itop {
        width: 28px;
        height: 28px;
        margin: 0 auto;
        position: relative;
    }
    &-number-show {
        position: absolute;
        top: -8px;
        right: -8px;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        // background-color:#ff0000;
        color: #fff;
        font-size: 10px;
        text-align: center;
        line-height: 15px;
    }
    &-img {
        width: 100%;
        height: 100%;
    }
    &-Ibottom {
        font-size: 12px;
        text-align: center;
        line-height: 14px;
        margin-top: 7px;
    }
    &-fixednew {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transform: translateZ(6px);
        -moz-transform: translateZ(6px);
        -o-transform: translateZ(6px);
        transform: translateZ(6px);
    }
    &-ss_menu {
        bottom: 75px;
        width: 50px;
        height: 50px;
        color: #fff;
        position: fixed;
        // transition: all 1s ease;
        right: 30px;
        filter: url(#goo);
        -webkit-transform: translateZ(8px);
        -moz-transform: translateZ(8px);
        -o-transform: translateZ(8px);
        transform: translateZ(8px);
    }
    &-share {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        padding: 13px;
        background-color: @bgcolor;
        border-radius: 50%;
        padding: 13px;
    }
    &-firstList {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 70px;
        transition: all 0.3s ease;
    }
    &-f-icon {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        border: 1px solid @bgcolor;
        padding: 13px;
        background-color: #fff;
    }
    &-f-word {
        width: 70px;
        color: #fff;
        text-align: center;
        font-size: 13px;
        height: 13px;
        line-height: 13px;
        margin-top: 6px;
        transform: translate(-10px 0);
    }
    &-firstListnew {
        top: -85px;
        left: 0;
    }
    &-twoList {
        top: -37px;
        left: -60px;
    }
    &-threeList {
        top: 37px;
        left: -80px;
    }
    &-itemList--new {
        margin-bottom: 0;
    }

    .unclickable .bs-workmain-Ibottom {
        color: #ccc;
    }
}
.newlisticon {
    // min-height:200px;
}
</style>
<style>
/* .bs-workmain .weui-toast .weui-toast__content{
        color: #fff;
        font-size: 14px;
    } */
</style>
